/**
 * @description  : 非文书审批流程组件
 * @descriptionDetail : 非文书审批流程组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-11-04 19:11:55
 */
<template>
  <u-time-line>

	  <u-time-line-item nodeTop="10">
	      <template #node>
	        <view class="u-node" style="background: gray;">
	          <!-- 此处为uView的icon组件 -->
	          <u-icon name="play-circle" color="#fff" :size="24"></u-icon>
	        </view>
	      </template>
	      <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
	      <template #content>
	        <view>
	          <view class="u-order-desc" style="margin-top: 0 !important;">
	  			开始
	          </view>
	        </view>
	      </template>
	    </u-time-line-item>

    <u-time-line-item nodeTop="10" v-for="(item,index) in approve" :key="index">
      <template #node>
        <view class="u-node" :style="{background: getColor(item.gfaiApprovalType)}">
          <!-- 此处为uView的icon组件 -->
          <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
        </view>
      </template>
      <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
      <template #content>
        <view>
          <view class="u-order-time">
            <text>{{ item.gfaName }}</text>
            <text style="margin-left: 10rpx;">
              {{ item.gfaiEtime }}
            </text>
          </view>
          <view class="row-m">
            <text class="u-order-time">
              审批人：
            </text>
            <text class="u-order-desc">
              {{ item.gfaiUname }}
            </text>
          </view>
          <view class="row-m">
            <text class="u-order-time">
              审批意见：
            </text>
            <text class="u-order-desc">
              {{ item.gfaiApproval||'' }}
            </text>
          </view>
        </view>
      </template>
    </u-time-line-item>
	<u-time-line-item nodeTop="10" v-if="endTitle != ''">
	    <template #node>
	      <view class="u-node" style="background: gray;">
	        <!-- 此处为uView的icon组件 -->
	        <u-icon name="minus-circle" color="#fff" :size="24"></u-icon>
	      </view>
	    </template>
	    <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
	    <template #content>
	      <view>
	        <view class="u-order-desc" style="margin-top: 0 !important;">
				{{endTitle}}
	        </view>
	      </view>
	    </template>
	  </u-time-line-item>
  </u-time-line>
</template>
<script>
import commonService from "@/service/common/common.service.js";
export default {
  name: "FlowHisNoDoc",
  props: {
    bizUuid: {
      type: String,
      require: true,
      default: '',
    },
    processDefKey: {
      type: String,
      require: true,
      default: '',
    },
	endTitle: {
	  type: String,
	  default: '',
	},
  },
  data() {
    return {
      approve: [],
    };
  },
  watch: {
    bizUuid: {
      handler(val) {
        this.getNoDocFlowHis();
      },
    },
  },
  created() {
    this.getNoDocFlowHis();
  },
  methods: {
    getNoDocFlowHis() {
      if (!this.bizUuid) return;
      let params = {
        bizUuid: this.bizUuid,
        processDefKey: this.processDefKey,
      };
      commonService.noDocFlowHis(params).then((res) => {
        if (res.success) {
          console.log('审批历史===>>', res);
          this.approve = res.data;
        }
      }).catch((err) => {
        console.log('获取审批历史出错==>', err);
      });
    },
    getColor(status) {
      if (status === 'comment') {
        return 'gray';
      } else if (status === '撤回') {
        return 'red';
      } else {
        return 'green';
      }
    },
  },

}
</script>

<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.row-m {
		margin-top: 20rpx;
	}

	.u-order-desc {
		color: $u-main-color;
		font-size: 28rpx;
		margin-bottom: 6rpx;
		margin-top: 12rpx;
    word-break: break-all; // 新加 2024 1-4 zyf 这里纯数字不换行，加这个解决换行 end
	}

	.u-order-time {
		color: $cm-form-subtitle-color;
		font-size: 26rpx;
	}
</style>
